<template>
	<view class="container">
		<view class="item" v-for="(item,index) in list">
			<!-- 交易类型 -->
			<view class="type">
				<image src="../../../static/market/point.png" mode="" v-if="item.tradingType==0"></image>
				<image src="../../../static/market/CGC.png" mode="" v-if="item.tradingType==1"></image>
				<view class="middle">
					<view class="boldtext" v-if="item.tradingType==0">积分兑换余额</view>
					<view class="boldtext" v-if="item.tradingType==1">CGC兑换余额</view>
					<view class="number" v-if="item.tradingType==0">{{item.tradingNum}}积分</view>
					<view class="number" v-if="item.tradingType==1">{{item.tradingNum}}CGC</view>
				</view>
				<view class="price">￥{{item.tradingMoney}}</view>
			</view>
			<!-- 联系卖家 -->
			<view class="contact">
				<view style="width: 20rpx;"></view>
				<!-- 根据订单状态显示哪些按钮 -->
				<view class="status">
					<view class="delete" @click="set(item.tradingMarketId,3,'上架')">上架</view>
					<view class="delete" @click="set(item.tradingMarketId,4,'删除')">删除</view>
				</view>
			</view>
		</view>
		<view class="noimg" v-if="list.length==0">
			<image src="../../../static/noimg/nonews.png" ></image>
		</view>
		<view class="push" @click="release">
			<image src="../../../static/market/push.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {jylist,setcgc} from"../../../api/index.js"
	export default{
		data(){
			return{
				type:0,//0:积分交易,1:cgc交易
				num:1,
				list:[]
			}
		},
		onShow() {
			this.list=[]
			this.num=0
			this.getlist()
		},
		onNavigationBarButtonTap(){
			uni.navigateTo({
				url:'../offshelf/offshelf'
			})
		},
			
		methods:{
			release(){
				uni.navigateTo({
					url:"../publish/publish"
				})
			},
			async getlist(){
				uni.showLoading({
					mask:true,
					title:"加载中..."
				})
				let res=await this.get(jylist,{pageSize:10,pageNum:this.num,tradingStatus:0})
				this.num++
				this.list=[...this.list,...res.data]
			},
			async set(id,num,s){
				this.showMd('确认'+s,()=>{
					this.get(setcgc,{
						tradingMarketId:id,
						type:num
					}).then(res=>{
						this.msg('操作成功')
						this.list=[]
						this.num=0
						this.getlist()
					})
				})
			}
		}
	}
</script>


<style lang="less">
	.noimg{
		width: 690rpx;
		height:70vh;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 300rpx;
			height: 400rpx;
		}
	}
	page{
		background: #F5F5F5;
	}
	.container{
		padding: 30rpx 30rpx 150rpx 30rpx;
	}
	.item{
		width: 690rpx;
		// height: 350rpx;
		background: #FFFFFF;
		opacity: 0.9;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}
	.user{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.userInfo{
		display: flex;
		align-items: center;
		image{
			width: 50rpx;
			height: 50rpx;
			margin-right: 10rpx;
		}
	}
	.boldtext{
		font-size: 30rpx;
		font-weight: bold;
	}
	.type{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		justify-content: space-between;
		image{
			width: 130rpx;
			height: 130rpx;
			margin-right: 20rpx;
		}
	}
	.number{
		font-size: 30rpx;
		font-weight: bold;
		color: #F09238;
		margin-top: 16rpx;
	}
	.price{
		font-size: 32rpx;
		font-weight: bold;
		color: #F09238;
		text-align: right;
	}
	.middle{
		width: 390rpx;
	}
	.contact{
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		justify-content: space-between;
	}
	.seller{
		display: flex;
		align-items: center;
		image{
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}
	.status{
		display: flex;
		align-items: center;
	}
	.remind{
		width: 148rpx;
		height: 56rpx;
		border: 1px solid #F09238;
		border-radius: 30rpx;
		line-height: 56rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #F09238;
		margin-right: 20rpx;
	}
	.pay{
		width: 124rpx;
		height: 56rpx;
		border: 1px solid #F09238;
		border-radius: 30rpx;
		line-height: 56rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #F09238;
		margin-right: 20rpx;
	}
	.delete{
		width: 100rpx;
		height: 56rpx;
		border: 1px solid #999999;
		border-radius: 30rpx;
		line-height: 56rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 20rpx;
	}
	.push{
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		bottom: 30rpx;
		left: 335rpx;
		image{
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>
